import React, { Component } from 'react';
import { getGedanxiangqingId, getGedanxiangqing } from '../../utils/api';
import { bus } from '../../utils/eventBus';
import '../../style/all.css';
import './GedanDetail.css';

export default class GedanDetail extends Component {
	state = {
		allList: [],
		currentList: [],
		currentPageNum: 1,
		offset: 20,
		gedanDetail: {},
		allListLength: 0
	}
	componentDidMount () {
		window.scroll(0, 0);
		this.getSongList();
	}
	getSongList = async () => {
		let { search } = this.props.location;
		let { currentPageNum, offset } = this.state;
		let gedanId = search.split('=')[1];
		let songIds = await getGedanxiangqingId(gedanId);
		let songIdList = songIds.playlist.trackIds.map(item => item.id)
		const { songs } = await getGedanxiangqing(songIdList.join(','));
		this.setState({
			allList: songs,
			allListLength: songs.length,
			currentList: songs.slice(0, currentPageNum * offset),
			gedanDetail: songIds.playlist
		})
	}
	goPrev = () => {
		let { allList, currentPageNum, offset } = this.state;
		this.setState({
			currentPageNum: currentPageNum - 1,
			currentList: allList.slice(((currentPageNum - 2) * offset), ((currentPageNum - 1) * offset))
		})
	}
	goNext = () => {
		let { allList, currentPageNum, offset } = this.state;
		this.setState({
			currentPageNum: currentPageNum + 1,
			currentList: allList.slice((currentPageNum * offset), (currentPageNum + 1) * offset)
		})
	}
	render () {
		let { coverImgUrl, name, description, creator, tags } = this.state.gedanDetail;
		let { currentList, currentPageNum, allListLength, offset } = this.state;
		return (
			<div className='gedandetail main'>
				<div className='back red' onClick={() => { this.props.history.goBack(); }}>&lt;返回</div>
				<div className='gedandetail_h'>
					<div className='gedanavator'>
						<img width='100%' height='100%' src={coverImgUrl} alt="" />
					</div>
					<div className='gedanprop'>
						<div className='title'>{name}</div>
						<div className='user'>{creator === undefined ? '' : creator.nickname} <span>&nbsp;&nbsp;所创建的</span></div>
						<div className='gedantag'>标签： </div>{tags === undefined ? [] : tags.map((item, index) => (<span key={index}>{item} </span>))}
						<div className='gedandesc'>{description}</div>
					</div>
				</div>
				<div className='gedandetail_c'>
					<h2>
						<span>id</span>
						<span>音乐标题</span>
						<span>歌手</span>
						<span>专辑</span>
						<span>时长</span>
					</h2>
					<ul>
						{currentList.map((item, index) => (
							<li key={index} onClick={() => { bus.emit('syplay', { id: item.id, duration: item.dt, name: item.name, artist: item.ar[0].name }) }}>
								<span>{index + 1}</span>
								<span>{item.name}</span>
								<span className='red' onClick={() => { window.sessionStorage.removeItem("serachlocation"); this.props.history.push(`search?keywords=${item.ar[0].name}&type=1`) }}>{item.ar[0].name}</span>
								<span>{item.al.name}</span>
								<span>{"0" + Math.floor((item.dt / 1000) % 3600 / 60) + ':' + (Math.floor((item.dt / 1000) % 60) < 10 ? '0' + Math.floor((item.dt / 1000) % 60) : Math.floor((item.dt / 1000) % 60))}</span>
							</li>
						))}
					</ul>
				</div>
				<div className='page'>
					{currentPageNum < 2 ? null : <span onClick={this.goPrev}>&lt;前往上一页</span>}
					{(Math.ceil(allListLength / offset)) <= currentPageNum ? null : <span onClick={this.goNext}>前往下一页&gt;</span>}
				</div>
			</div>
		)
	}
}
